<template>
    <div class="but" :style="{ width, height, borderRadius: radius, ...styleObj, ...type, cursor: disabled ? 'not-allowed' : 'pointer' }" @click="onTap" @mouseover="mouseover" @mouseout="mouseout" @mousedown="mousedown" @mouseup="mouseup">
        <slot></slot>
    </div>
</template>

<script>
export default {
    name: "qg-button",
    props: {
        mode: {
            type: String,
            default: "",
        },
        delayed: {
            type: Number,
            default: 200,
        },
        width: {
            type: String,
            default: "100%",
        },
        height: {
            type: String,
            default: "50px",
        },
        color: {
            type: String,
            default: "#999",
        },
        radius: {
            type: String,
            default: "4px",
        },
        styleObj: {
            type: Object,
            default: () => {
                return {};
            },
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        fixed: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            odlType: {},
            params: {},
            mousType: {},
            state: false,
        };
    },
    mounted() {
        this.odlType = { ...this.type };
    },
    computed: {
        type: {
            get() {
                if (this.state) return this.params;
                if (this.disabled) {
                    this.params.color = "#cfff";
                    this.params.backgroundColor = "#28a819";
                } else if (this.mode.includes("bg")) {
                    this.params.backgroundColor = this.color;
                    this.params.color = "#fff";
                    delete this.params.border;
                } else {
                    this.params.color = this.color;
                    this.params.backgroundColor = "#f5f5f5";
                }
                return this.params;
            },
            set(val) {
                this.params = val;
            },
        },
        mouseoverStyle() {
            let params = {};
            if (this.disabled) {
                params.color = "#cfff";
                params.backgroundColor = "#28a819";
            } else if (this.mode.includes("bg")) {
                params.backgroundColor = "#55cc47";
                params.color = "#fff";
            } else {
                params.color = "#333";
                params.backgroundColor = "#ebebeb";
            }
            return params;
        },
        mousedownStyle() {
            let params = {};
            if (this.disabled) {
                params.color = "#cfff";
                params.backgroundColor = "#28a819";
            } else if (this.mode.includes("bg")) {
                params.backgroundColor = "#28a819";
                params.color = "#fff";
            } else {
                params.color = "#333";
                params.backgroundColor = "#dedede";
            }
            return params;
        },
    },
    methods: {
        mouseover() {
            if (this.isDisabled || this.fixed) return;
            this.state = true;
            this.type = { ...this.type, ...this.mouseoverStyle };
            this.mousType = { ...this.type };
        },
        mouseout() {
            if (this.isDisabled || this.fixed) return;
            this.state = false;
            this.type = { ...this.odlType };
        },
        mousedown() {
            if (this.isDisabled || this.fixed) return;
            this.type = { ...this.type, ...this.mousedownStyle };
        },
        mouseup() {
            if (this.isDisabled || this.fixed) return;
            this.type = { ...this.mousType };
        },
        onTap(e) {
            if (this.isDisabled || this.fixed) return;
            this.$debounce(() => {
                this.$emit("click", e);
            });
        },
    },
};
</script>

<style lang="less" scoped>
.but {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
}
// .but:active {
//     background-color: #000000 !important;
//     color: #fff !important;
// }
</style>
